<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<base th:href="${#request.getContextPath()}+'/'">
	<meta charset="UTF-8">
	<title>待办事项</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/font.css">
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="css/xadmin.css">
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="js/xadmin.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body class="layui-anim">
<div class="x-nav">
	      <span class="layui-breadcrumb">
	        <a href="javascript:">首页</a>
	        <a href="javascript:">代办管理</a>
	        <a><cite>待办事项管理</cite></a>
	      </span>
	<a class="layui-btn layui-btn-primary layui-btn-small" style="margin-top:4px;float:right;" href="javascript:location.replace(location.href);" title="刷新">
		<i class="iconfont">&#xe6aa</i>
	</a>
</div>
<div class="x-body">
	<div class="layui-table-main layui-form" style="height: 100%">
		<table id="myTableData" lay-filter="myTableData"  class="layui-hide"></table>
	</div>
</div>
<script type="text/html" id="allBarDemo">
</script>
<script type="text/html" id="myBarDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="myToolbarDemo">
	<div class="layui-btn-container">

	</div>
</script>
<div class="form-wrap" id="updateInfo">
	<div class="layui-fluid">
		<div class="layui-card-header">请填写以下信息，注*号为必填项不可以为空</div>
		<form class="layui-form" lay-filter="component-form-group" id="component-form-group">
		<input type="hidden" name="id" />
		<input type="hidden" name="userid" />
          <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
              <input type="hidden" name="id" class="layui-input" lay-verify="id"/>
              <input type="text" name="title" lay-verify="title" id="title" autocomplete="off" placeholder="请输入标题.." class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
              <textarea name="content" lay-verify="content" id="content"placeholder="请输入内容..." class="layui-textarea"></textarea>
            </div>
          </div>
          
          <div class="layui-form-item layui-layout-admin">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="submission" lay-submit="">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
	</div>
</div>
<script type="text/javascript" src="js/common/common.js"></script>
<script>
    var title="建筑材料信息";
    var size=['600px', '500px'];
    var findAll_url='todo/myFindAll.json';
    var delete_url="todo/delete.jhtml";
    var update_url="todo/update.jhtml";
    //初始化修改页面
    function loadData(data){
        var ret={
            "id": data.id,
            "title": data.title,
            "content": data.content,
            "userid" :data.userid
        };
        return ret;
    }
    
    function myItem(){
    	var util = layui.util;
       var cols=[ 
            {checkbox: true, fixed: true},
            {field: 'createDate',width:"130",templet: "<div>{{layui.util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss')}}</div>",
            title: '创建时间'},
            {field: 'title' ,title: '标题',width:"130"},
            {field: 'content' ,title: '内容',width:"130"},
            {title:'操作', toolbar: '#myBarDemo',fixed: 'right',align: 'center',width:"180",fixed: 'right'}
        ];
        
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#myTableData',
                id:'listReload',
                toolbar: '#myToolbarDemo',
                title: title,
                url: findAll_url,
                page: true, //开启分页
                limits : [ 10, 20, 30, 50], //控制多少行一页（默认五条一页）
                defaultToolbar: ['filter', 'print', 'exports'],
                cols: [cols],
                done(){
                    //alert() 数据渲染完的方法
                }
            });

            //头工具栏事件
            table.on('toolbar(myTableData)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add':
                        layer.msg("add");
                        initUpdate(0);
                        break;
                    case 'delete':
                        layer.msg("delete");
                        break;
                    case 'export':
                        layer.msg("export");
                        break;
                }
            });
            
            //点击每行右工具栏“操作”里面按钮效果
            table.on('tool(myTableData)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.msg('ID：'+ data.id + ' 的查看操作');
                    x_adminer_show('查看信息', 'base/link/@/item/materiallistsee.jhtml?/#/examineId=' + data.id);
                } else if(obj.event === 'edit'){
                    initUpdate(data);
                } else if(obj.event === 'del'){
                    layer.confirm('删除以后数据将不能恢复，确定删除吗？', function(index){
                        $.ajax({
                            url: delete_url,
                            type: "POST",
                            data:{"id":data.id},
                            dataType: "json",
                            success: function(data){
                                if(data==null){
                                    layer.msg("删除失败", {icon: 5});
                                }else{
                                    obj.del();//删除这一行
                                    layer.msg("删除成功", {icon: 6});
                                    layer.closeAll();
                                }
                            },
                            error:function(){
                                alert(data);
                            }
                        });
                    });
                }
            });
            //搜索效果
            $('#searchBtn').on('click',function(){
                var keyWord=$('#search_term').val();
                table.reload('listReload', {
                    url: findAll_url,
                    where: {
                        keyWord: keyWord
                    },
                    page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            });

            //监听提交
            layui.use('form', function(){
                var form = layui.form;
                //自定义验证规则
                form.verify({
                    required : [ /[\S]+/, "必填项不能为空" ],
                    name: function(value){
                        if(value.length < 4){
                            return '设备厂家至少4个字符';
                        }
                    }
                });
                //验证通过后提交数据到后台
                form.on('submit(submission)', function(data){
                    /* layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                  })  */
                    postUpdate(data);
                    return false;
                });
            });
            //ajax提交表单内容
            window.postUpdate = function (data){
                $.ajax({
                    url: update_url,
                    type: "POST",
                    data:{"data": JSON.stringify(data.field)},
                    dataType: "json",
                    success: function(data){
                        if(data.code==0){
                            layer.closeAll();
                            layer.msg(data.msg, {time:600, icon: 1},function(){
                                table.reload('listReload');
                            });
                        }else{
                            layer.msg(data.msg, {icon: 5});
                        }
                    },
                    error:function(jqXHR, textStatus, errorThrown){
                        layer.open({
                            title: "错误信息",
                            type: 1,
                            content: jqXHR.responseText, //statusText
                            btn: ['关闭'] //可以无限个按钮
                        });
                    }
                });
            }
        });
    }
    //弹出修改页面调用初始化数据方法
    function initUpdate(data){
        layer.open({
            title: title,
            area: size,
            type: 1,
            content: $('#updateInfo'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['关闭'] //可以无限个按钮
        });
        if(data==0 || data==null){
            $(":reset").click();
            return;
        }
        /*alert(JSON.stringify(data));*/
        layui.form.val("component-form-group",loadData(data));
    }
    myItem();
</script>
<script type="text/html" id="timeTpl">
	
  {{ time2date(d.ctime) }}
</script>
</body>
</html>
